<!-- v1: Component calls service for data retrieving

<ng-template #loading>
  <app-spinner [fill]="'#ffc107'" [height]="200" [width]="200" [isCenter]="false"></app-spinner>
</ng-template>

<div class="container" *ngIf="event$ | async as event; else loading">
  <img [src]="event?.imageUrl" [alt]="event?.name" class="event-img">

  <div class="row">
    <div class="col-md-11">
      <h2>{{event?.name}} </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div>
        <strong>Date:</strong> {{event?.date}}</div>
      <div>
        <strong>Time:</strong> {{event?.time}}</div>
      <div>
        <strong>Price:</strong> ${{event?.price}}</div>
    </div>
    <div class="col-md-6">
      <address>
        <strong>Address:</strong>
        <br /> {{event?.location?.address}}
        <br /> {{event?.location?.city}}, {{event?.location?.country}}
      </address>
    </div>
  </div>
</div> -->


<!-- v2: Use resolver for data retrieving, app.component is responsible for loading -->

<!-- <div class="container" *ngIf="event$ | async as event;"> -->
<div class="container"
     *ngIf="event">
  <img [src]="event.imageUrl"
       [alt]="event.name"
       class="event-img">

  <div class="row pb-3">
    <div class="col-md-11">
      <h2>{{event.name | uppercase}} </h2>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div>
        <strong>Date:</strong> {{event.date | date:'shortDate'}}</div>
      <div>
        <strong>Time:</strong> {{event.time}}</div>
      <div>
        <strong>Price:</strong> {{event.price | currency:'USD':'symbol'}}</div>
    </div>
    <div class="col-md-6">
      <address>
        <strong>Address:</strong>
        <br /> {{event.location?.address}}
        <br /> {{event.location?.city}}, {{event.location?.country}}
      </address>
    </div>
  </div>

  <hr>

  <div class="row my-3">
    <div class="col-md-2">
      <h3>Sessions</h3>
    </div>
    <div class="col-md-10">
      <div class="btn-group">
        <button class="btn btn-info"
                [class.active]="sortBy==='name'"
                (click)="sortBy='name'">By Name</button>
        <button class="btn btn-info"
                [class.active]="sortBy==='votes'"
                (click)="sortBy='votes'">By Votes</button>
      </div>

      <div class="btn-group">
        <button class="btn btn-info"
                [class.active]="filterBy==='all'"
                (click)="filterBy='all'">All</button>
        <button class="btn btn-info"
                [class.active]="filterBy==='beginner'"
                (click)="filterBy='beginner'">Beginner</button>
        <button class="btn btn-info"
                [class.active]="filterBy==='intermediate'"
                (click)="filterBy='intermediate'">Intermediate</button>
        <button class="btn btn-info"
                [class.active]="filterBy==='advanced'"
                (click)="filterBy='advanced'">Advanced</button>
      </div>

      <button type="button"
              class="float-right btn btn-outline-warning"
              (click)="addSession()">Add Session</button>
    </div>
  </div>

  <app-session-list [eventId]="event.id"
                    [sortBy]="sortBy"
                    [filterBy]="filterBy"
                    *ngIf="!addMode"
                    [sessions]="event.sessions"></app-session-list>
  <app-session-create *ngIf="addMode"
                      (saveNewSession)="saveNewSession($event)"
                      (cancelAddSession)="cancelAddSession()"></app-session-create>

</div>
